<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			div {
				position: relative;
				width: 200px;
				height: 200px;
				background-color: hotpink;
				/* 这里的50%是相当于盒子自身来说的，所以是100px */
				/* transform: translateX(50%); */
			}

			p {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 80px;
				height: 80px;
				background-color: green;
				transform: translate(-50%, -50%);
				/* 现在用2D转换移动来实现 */
				/* 实际有一点点偏下 清除掉内外边距后就没有这个问题了*/
				
				/* margin-top: -40px; */
				/* margin-left: -40px; */
				/* 以前实现盒子居中是用margin来移动盒子自身宽高的一半 */
			}
			span {
				background-color: skyblue;
				transform: translate(100px,100px);
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
		</div>
		<br>
		<span>我不会移动</span>
	</body>
</html>
